<template>
	<view class="container-box">
		<view class="info-title">更改个人信息</view>
		<view class="head-box">
			<image :src="infoRes.headImg?infoRes.headImg:'../../static/images/register/no_upload_mo_ren.png'"
				mode="aspectFill" style="width: 100%;height: 100%;border-radius: 50%;border: 1rpx solid #DDDDDD;">
			</image>
			<image src="../../static/images/register/btn_register_upload.png" class="btn-register-upload" mode="">
			</image>
			<!-- @click="chooseImage" -->
			<button style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;" open-type="chooseAvatar"
				@chooseavatar="onChooseavatar">
			</button>
		</view>
		<view class="flex-cc" style="margin-top: 90rpx;">
			<view class="user-name">用户名</view>
			<input class="selectWorksTypeClass" type="nickname" v-model="infoRes.nickName" @blur="getNickName"
				maxlength="10" placeholder="请输入(限制10个字以内)" />
		</view>
		<!-- <view class="divider-line" style="width: 600rpx;margin: 0 auto;margin-top: 20rpx;"></view> -->
		<view class="btn-weixin-auth">
			<!-- <image src="../../static/btn_weixin_auth.png" mode=""></image> -->
			<view class="btn-w-a-confirm" @click="authLogin">确定</view>
			<!-- <button withCredentials="true" @click="authLogin"></button> -->
		</view>
	</view>
</template>


<script>
	import OssUtil from '@/common/aliyun_oss/ossUtil.js'
	import {
		updateUserInfo
	} from '@/common/api/user_api.js'
	export default {
		data() {
			return {
				infoRes: {
					nickName: '',
					headImg: ''
				},
				authCode: null,
				flag: false,
				paramObj: null,
        isBack:false, //保存后是否返回上一页
			}
		},
		created() {
			// console.log(this.getUserInfo.nickName)
			this.infoRes.nickName = this.getUserInfo.nickName;
			this.infoRes.headImg = this.getUserInfo.avatar;
		},
		onLoad(options) {
      console.log(options,'===options')
			if (options.paramObj) {
				this.paramObj = JSON.parse(options.paramObj);
        console.log(this.paramObj.userType, '=======================121')
			}
			if(options.isBack){
        this.isBack = options.isBack
      }
		},
		methods: {
			getNickName(e) {
				console.log(e);
				this.infoRes.nickName = e.detail.value;
			},
			async chooseImage() {
				let images = await OssUtil.getImage();
				console.log(images)
				this.infoRes.headImg = images.tempFilePaths[0]
			},
			onChooseavatar(e) {
				this.infoRes.headImg = e.detail.avatarUrl;
				console.log('用户选择头像:', this.infoRes.headImg);
			},
			uploadFun() {
				if (this.getUserInfo.avatar == this.infoRes.headImg) {
					this.doUpdateUserInfo();
					return
				}
				OssUtil.uploadFile(this.infoRes.headImg, (successRes) => {
					console.log(successRes + '-----');
					this.infoRes.headImg = successRes;
					this.doUpdateUserInfo();
				}, (failRes) => {
					this.$showToast(failRes)
				}, 'img');
			},
			doUpdateUserInfo() {
				updateUserInfo({
					nickName: this.infoRes.nickName,
					avatarUrl: this.infoRes.headImg,
					gender: '0'
				}).then(res => {
					if (res.data.code == 200) {
						let userInfo = this.$store.getters['user/getUserInfo'];
						userInfo.avatar = this.infoRes.headImg;
						userInfo.nickName = this.infoRes.nickName;
						this.$store.commit('user/setUserInfo', userInfo)
						if(this.isBack){
              uni.navigateBack()
            }else if (this.paramObj && this.paramObj.userType == 'e-commerce') { //电商用户跳转测评
							uni.reLaunch({
								// url: '/pages/consultAccount/consultAccount'
								url: '/pages/sclList/sclList'
							})
						} else if (this.paramObj && this.paramObj.userType =='sclShare') {
							uni.reLaunch({
								url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON
									.stringify(this.paramObj)
							})
						}else if (this.paramObj && this.paramObj.userType == 'sclList') {
              uni.reLaunch({
                url: '/pages/sclList/sclList?paramObj=' + JSON.stringify(options)
              })
            } else if ( this.paramObj && this.paramObj.userType == 'sclMore') {
              uni.reLaunch({
                url: '/pages/sclList/sclList?paramObj=' + JSON.stringify(options)
              })
            }  else if (this.paramObj && this.paramObj.userType == 'article') {
              uni.reLaunch({
                url: '/subcontractorC/pages/courseArticle/courseArticle?id=' + this.paramObj.id
              })
            } else if (this.paramObj &&  this.paramObj.userType == 'video') {
              uni.reLaunch({
                url: '/subcontractorC/pages/courseVideo/courseVideo?id=' + this.paramObj.id
              })
            }else if (this.paramObj &&  this.paramObj.userType == 'evaluate') {
				uni.reLaunch({
					url:'/subcontractorC/pages/returnVisit/returnVisit?orderUid='+this.paramObj.orderUid
				})
            } else if (this.paramObj && this.paramObj.scene) {
							const tmpData = parseKeyValueString(decodeURIComponent(this.paramObj.scene))
							if (tmpData.r == '1') {
								uni.redirectTo({
									url: '/subcontractorB/pages/order/detail?paramObj=' + JSON.stringify(tmpData),
								})
							} else if (tmpData.r == '2') {
								uni.reLaunch({
									url: '/pages/orderList/orderList?paramObj=' + JSON.stringify(tmpData)
								})
							} else if (tmpData.r == '3') {
								uni.redirectTo({
									url: '/subcontractorA/payment/details?paramObj=' + JSON.stringify(
										tmpData)
								})
							}
						} else {
							uni.reLaunch({
								url: '/pages/sclList/sclList'
							})
						}
					} else {
						this.$showToast(res.data.message)
					}
				})
			},
			authLogin() {
				if (this.infoRes.headImg == '') {
					this.$showToast('请添加头像')
					return
				}
				if (this.infoRes.nickName == '') {
					this.$showToast('请输入昵称')
					return
				}

				if (this.infoRes.nickName.length > 18) {
					this.$showToast('限制18个字以内')
					return
				}

				this.uploadFun();
			}
		}
	}
</script>

<style>
	.info-title {
		font-size: 46rpx;
		font-weight: bold;
		color: #333333;
		padding-left: 40rpx;
		padding-top: 57rpx;
	}

	.btn-w-a-confirm {
		width: 690rpx;
		height: 102rpx;
		border-radius: 51rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 102rpx;
		text-align: center;
		background-color: #58B938;
		margin: 0 auto;
	}

	.user-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		flex-shrink: 0;
	}

	.selectWorksTypeClass {
		width: 504rpx;
		height: 86rpx;
		line-height: 86rpx;
		padding: 0 49rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333333;
	}

	.head-box {
		width: 182rpx;
		height: 182rpx;
		display: block;
		margin: 0 auto;
		margin-top: 340rpx;
		position: relative;
	}

	.head-box button {
		background-color: transparent;
	}

	.head-box button::after {
		border: none;
	}

	.btn-register-upload {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 56rpx;
		height: 56rpx;
	}


	.login-title {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #333333;
		padding-top: 200rpx;
	}

	.btn-weixin-auth {
		width: 690rpx;
		height: 102rpx;
		margin: 0 auto;
		margin-top: 300rpx;
		position: relative;
	}

	.btn-weixin-auth image {
		width: 100%;
		height: 100%;
	}

	.btn-weixin-auth button {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border: none;
		background: transparent;
	}

	.btn-weixin-auth button::after {
		border: none;
	}
</style>